<template>
  <div class="activity-management">
    <div class="header-section">
      <h2>活动管理</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.activityName"
          placeholder="活动名称"
          class="search-input"
        />
        <el-select
          v-model="searchForm.activityType"
          placeholder="活动类型"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="线上讲座" value="online_lecture" />
          <el-option label="线下沙龙" value="offline_salon" />
          <el-option label="工作坊" value="workshop" />
          <el-option label="比赛" value="competition" />
        </el-select>
        <el-select
          v-model="searchForm.status"
          placeholder="活动状态"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="筹备中" value="preparing" />
          <el-option label="进行中" value="ongoing" />
          <el-option label="已结束" value="ended" />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="handleAdd">新增活动</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="activityList" style="width: 100%">
        <el-table-column prop="id" label="序号" min-width="80" />
        <el-table-column prop="activityName" label="活动名称" min-width="200" />
        <el-table-column prop="activityType" label="活动类型" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.activityType === 'online_lecture'" type="primary">线上讲座</el-tag>
            <el-tag v-else-if="scope.row.activityType === 'offline_salon'" type="success">线下沙龙</el-tag>
            <el-tag v-else-if="scope.row.activityType === 'workshop'" type="warning">工作坊</el-tag>
            <el-tag v-else type="danger">比赛</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="organizer" label="负责人" min-width="100" />
        <el-table-column prop="startTime" label="开始时间" min-width="160" />
        <el-table-column prop="endTime" label="结束时间" min-width="160" />
        <el-table-column prop="location" label="活动地点" min-width="150" />
        <el-table-column prop="capacity" label="参与人数" min-width="100" />
        <el-table-column prop="status" label="活动状态" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'preparing'" type="info">筹备中</el-tag>
            <el-tag v-else-if="scope.row.status === 'ongoing'" type="success">进行中</el-tag>
            <el-tag v-else type="danger">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right">
          <template #default="scope">
            <div style="display: flex; gap: 8px;">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                style="min-width: 60px;"
              >
                编辑
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handleStart(scope.row)"
                v-if="scope.row.status === 'preparing'"
                style="min-width: 60px;"
              >
                启动
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                style="min-width: 60px;"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑活动对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      @close="handleDialogClose"
    >
      <el-form :model="activityForm" label-width="120px">
        <el-form-item label="活动名称" required>
          <el-input v-model="activityForm.activityName" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动类型" required>
          <el-radio-group v-model="activityForm.activityType">
            <el-radio label="online_lecture">线上讲座</el-radio>
            <el-radio label="offline_salon">线下沙龙</el-radio>
            <el-radio label="workshop">工作坊</el-radio>
            <el-radio label="competition">比赛</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-input v-model="activityForm.organizer" placeholder="请输入负责人姓名" />
        </el-form-item>
        <el-form-item label="开始时间" required>
          <el-date-picker
            v-model="activityForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" required>
          <el-date-picker
            v-model="activityForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="活动地点" required>
          <el-input v-model="activityForm.location" placeholder="请输入活动地点" />
        </el-form-item>
        <el-form-item label="参与人数" required>
          <el-input v-model.number="activityForm.capacity" placeholder="请输入参与人数上限" />
        </el-form-item>
        <el-form-item label="活动介绍">
          <el-input
            v-model="activityForm.description"
            type="textarea"
            placeholder="请输入活动介绍"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ActivityManagement',
  data() {
    return {
      searchForm: {
        activityName: '',
        activityType: '',
        status: ''
      },
      activityList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '',
      activityForm: {
        id: '',
        activityName: '',
        activityType: 'online_lecture',
        organizer: '',
        startTime: '',
        endTime: '',
        location: '',
        capacity: '',
        description: '',
        status: 'preparing'
      }
    }
  },
  mounted() {
    this.loadActivityList()
  },
  methods: {
    loadActivityList() {
      // 模拟数据
      this.activityList = [
        {
          id: 1,
          activityName: 'Web前端技术分享会',
          activityType: 'online_lecture',
          organizer: '张三',
          startTime: '2023-11-01 19:00:00',
          endTime: '2023-11-01 21:00:00',
          location: '线上直播',
          capacity: 200,
          status: 'ongoing',
          createTime: '2023-10-20 14:30:00'
        },
        {
          id: 2,
          activityName: '产品经理实战工作坊',
          activityType: 'workshop',
          organizer: '李四',
          startTime: '2023-11-10 14:00:00',
          endTime: '2023-11-10 17:00:00',
          location: '北京朝阳区',
          capacity: 30,
          status: 'preparing',
          createTime: '2023-10-22 09:15:00'
        },
        {
          id: 3,
          activityName: '创业者交流会',
          activityType: 'offline_salon',
          organizer: '王五',
          startTime: '2023-11-05 16:00:00',
          endTime: '2023-11-05 18:30:00',
          location: '上海浦东新区',
          capacity: 50,
          status: 'preparing',
          createTime: '2023-10-25 11:45:00'
        },
        {
          id: 4,
          activityName: '编程挑战赛',
          activityType: 'competition',
          organizer: '赵六',
          startTime: '2023-10-28 10:00:00',
          endTime: '2023-10-28 16:00:00',
          location: '线上',
          capacity: 100,
          status: 'ended',
          createTime: '2023-10-15 10:00:00'
        },
        {
          id: 5,
          activityName: 'UI设计分享会',
          activityType: 'online_lecture',
          organizer: '孙七',
          startTime: '2023-11-15 20:00:00',
          endTime: '2023-11-15 21:30:00',
          location: '线上直播',
          capacity: 150,
          status: 'preparing',
          createTime: '2023-10-28 15:20:00'
        }
      ]
      this.pagination.total = this.activityList.length
    },
    handleSearch() {
      // 这里实现搜索逻辑
      console.log('搜索参数:', this.searchForm)
      // 模拟搜索
      this.loadActivityList()
    },
    resetSearch() {
      this.searchForm = {
        activityName: '',
        activityType: '',
        status: ''
      }
      this.loadActivityList()
    },
    handleAdd() {
      this.dialogTitle = '新增活动'
      this.activityForm = {
        id: '',
        activityName: '',
        activityType: 'online_lecture',
        organizer: '',
        startTime: '',
        endTime: '',
        location: '',
        capacity: '',
        description: '',
        status: 'preparing'
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑活动'
      this.activityForm = { ...row }
      this.dialogVisible = true
    },
    handleStart(row) {
      this.$confirm('确定要启动该活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里实现启动逻辑
        console.log('启动活动:', row)
        row.status = 'ongoing'
        this.$message({ type: 'success', message: '启动成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消启动' })
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 这里实现删除逻辑
        console.log('删除活动:', row)
        const index = this.activityList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.activityList.splice(index, 1)
          this.pagination.total = this.activityList.length
        }
        this.$message({ type: 'success', message: '删除成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleSubmit() {
      // 这里实现提交逻辑
      console.log('提交活动:', this.activityForm)
      if (this.activityForm.id) {
        // 编辑
        const index = this.activityList.findIndex(item => item.id === this.activityForm.id)
        if (index > -1) {
          this.activityList[index] = { ...this.activityForm }
        }
        this.$message({ type: 'success', message: '编辑成功' })
      } else {
        // 新增
        const newActivity = {
          ...this.activityForm,
          id: Date.now(),
          createTime: new Date().toLocaleString()
        }
        this.activityList.unshift(newActivity)
        this.pagination.total = this.activityList.length
        this.$message({ type: 'success', message: '新增成功' })
      }
      this.dialogVisible = false
    },
    handleDialogClose() {
      // 对话框关闭时的处理
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
    },
    handleCurrentChange(current) {
      this.pagination.currentPage = current
    }
  }
}
</script>

<style scoped>
.activity-management {
  padding: 20px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 15px;
  color: #303133;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.search-select {
  width: 150px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>